﻿<UserControl x:Class="Matchingo.Modules.HighScoreModule.Views.HighScoreView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
        xmlns:converters="clr-namespace:Matchingo.Common.Types.Converters;assembly=Matchingo.Common.Types"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        mc:Ignorable="d">
    
    <UserControl.Resources>
        <converters:TimerDisplayConverter x:Key="TimerConverter"/>
        <Storyboard x:Name="SlideInRightStoryboard">
        	<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MovableContainer" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        		<SplineDoubleKeyFrame KeyTime="00:00:00" Value="417"/>
        		<SplineDoubleKeyFrame KeySpline="1,1,1,1" KeyTime="00:00:00.5000000" Value="0"/>
        	</DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="SlideOutRightStoryboard">
        	<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="MovableContainer" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        		<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        		<SplineDoubleKeyFrame KeySpline="0,0,1,1" KeyTime="00:00:00.5000000" Value="414"/>
        	</DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    
    <!-- TODO:: any way to bind these sizes to a resource? -->
	<Canvas x:Name="LayoutRoot" 
		    Width="360" Height="430" RenderTransformOrigin="0.5,0.5">
		<Canvas.RenderTransform>
			<TransformGroup>
				<ScaleTransform/>
				<SkewTransform/>
				<RotateTransform/>
				<TranslateTransform/>
			</TransformGroup>
		</Canvas.RenderTransform>

		<Grid Height="430" x:Name="MovableContainer" Width="360" RenderTransformOrigin="0.5,0.5">
			<Grid.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</Grid.RenderTransform>
			<Grid Margin="6,52,8,12">
				<Grid.OpacityMask>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#00FF0000"/>
						<GradientStop Color="#FFFF0000" Offset="0.022"/>
						<GradientStop Color="#FFFF0000" Offset="0.729"/>
						<GradientStop Color="#00000000" Offset="1"/>
					</LinearGradientBrush>
				</Grid.OpacityMask>
				<Rectangle Margin="26,0,26,0" Stroke="#FF000000">
					<Rectangle.Fill>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#FF2A3F71"/>
							<GradientStop Color="#FF08183F" Offset="0.676"/>
							<GradientStop Color="#FF2A3F71" Offset="1"/>
						</LinearGradientBrush>
					</Rectangle.Fill>
				</Rectangle>
				<Rectangle Width="26" Stroke="#FF000000" HorizontalAlignment="Right">
					<Rectangle.Fill>
						<LinearGradientBrush EndPoint="0.809,0.503" StartPoint="-0.095,0.503">
							<GradientStop Color="#FF999999"/>
							<GradientStop Color="#FFFFFFFF" Offset="0.132"/>
							<GradientStop Color="#FF8D8D8D" Offset="1"/>
							<GradientStop Color="#FFF9F9F9" Offset="0.854"/>
						</LinearGradientBrush>
					</Rectangle.Fill>
				</Rectangle>
				<Rectangle Width="26" Stroke="#FF000000" HorizontalAlignment="Left">
					<Rectangle.Fill>
						<LinearGradientBrush EndPoint="0.809,0.503" StartPoint="-0.095,0.503">
							<GradientStop Color="#FF999999"/>
							<GradientStop Color="#FFFFFFFF" Offset="0.132"/>
							<GradientStop Color="#FF8D8D8D" Offset="1"/>
							<GradientStop Color="#FFF9F9F9" Offset="0.854"/>
						</LinearGradientBrush>
					</Rectangle.Fill>
				</Rectangle>
			</Grid>

			<!-- TODO:: these LayoutRoot elements should be defaultly hidden, but when we do that there
                    is a hickup when they are first displayed/rendered - should have them display once 
                    off screen during initialization -->
			<Border BorderThickness="1" BorderBrush="#44444444" CornerRadius="4" x:Name="Score_Grid" RenderTransformOrigin="0.5,0.5" Margin="32,116,36,40" Opacity="1">
				<Border.RenderTransform>
					<TransformGroup>
						<ScaleTransform/>
						<SkewTransform/>
						<RotateTransform/>
						<TranslateTransform/>
					</TransformGroup>
				</Border.RenderTransform>

				<Grid Height="271" Width="279.5" VerticalAlignment="Bottom">
					<data:DataGrid x:Name="ScoresGrid"                                    
						ItemsSource="{Binding Path=GameRecords}"
                        AlternatingRowBackground="White"
                        RowBackground="White"                        
                        IsReadOnly="True"
                        SelectionMode="Single"
                        LoadingRow="ScoresGrid_LoadingRow"
                        CanUserSortColumns="False"
                        CanUserReorderColumns="False"
                        CanUserResizeColumns="False"
                        HeadersVisibility="All"
						AutoGenerateColumns="False" Margin="0,30,0,45" Cursor="Hand">
						<data:DataGrid.Columns>
							<data:DataGridTextColumn Header="Name" Binding="{Binding Path=PlayerName}" Width="90" />
							<data:DataGridTextColumn Header="Score" Binding="{Binding Path=Score}" Width="70" />
							<data:DataGridTextColumn Header="Time" Binding="{Binding Converter={StaticResource TimerConverter}, Path=GameTimeElapsed}" 
                                                     Width="60"  />
							
							<!-- invisible columns -->
                            <!--
                            <data:DataGridTextColumn Header="Turns" Binding="{Binding Path=TurnCount}" Width="100"  />
                            <data:DataGridTextColumn Header="Cards" Binding="{Binding Path=CardCount}" Visibility="Collapsed" Width="0"  />
                            -->
						</data:DataGrid.Columns>

					</data:DataGrid>
                    
					<!-- TODO:: need to add a grid with data, sorting, etc. -->
                    
					<Button Click="Replay_Clicked" Height="43.5" Margin="0,0,0,-1" VerticalAlignment="Bottom" x:Name="ReplayButton" FontSize="22" Cursor="Hand">
						<TextBlock Text="Watch Replay"/>
					</Button>
					<ComboBox x:Name="CardsComboBox"
                              Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Width="140" 
                              FontSize="14" Cursor="Hand">                       
					</ComboBox>
                    <ComboBox x:Name="SortByComboBox"
                              Height="30" HorizontalAlignment="Right" VerticalAlignment="Top" Width="139.867" 
                              d:LayoutOverrides="Width" FontSize="14" Cursor="Hand"/>
                </Grid>
			</Border>
			<TextBlock Text="High Scores" Height="Auto" Width="Auto" FontSize="36" Foreground="#FFFFFFFF" Margin="38,68,40,0" x:Name="OptionsTextblock" VerticalAlignment="Top" FontFamily="Portable User Interface" FontWeight="Bold" TextAlignment="Center"/>                                                
		</Grid>
    </Canvas>
</UserControl>
